<template>
  <div class="allBox">
    <!-- 左边盒子 -->
    <div class="leftBox">
      <div style="display: flex;">
        <span class="juzao">ORDER聚造</span>
        <div>
          <div class="line"></div>
          <div class="line" style="margin-top:4px"></div>
          <div class="line" style="margin-top:4px"></div>
        </div>
      </div>
      <!-- 首页 -->
      <!-- <div style="display: flex;">
        <img src="../assets/set2.png" class="set2img" />
        <span class="syText">首页</span>
      </div> -->
      <!-- 系统设置 -->
      <!-- <div style="display: flex;">
        <img src="../assets/set.png" class="setimg" />
        <span class="xtszText">系统设置</span>
        <img src="../assets/arrows.png" class="arrowsimg" />
      </div>     -->

      <!-- 导航栏 -->
      <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <!-- 首页管理 -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>首页管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">轮播图管理</el-menu-item>
          <el-menu-item index="1-2">分类区管理</el-menu-item>
          <el-menu-item index="1-3">为您推荐管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 商品管理 -->
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>商品管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="2-1">分类管理</el-menu-item>
          <el-menu-item index="2-2">品牌管理</el-menu-item>
          <el-menu-item index="2-3">商品管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- 新闻管理 -->
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>新闻管理</span>
        </template>
      </el-submenu>
    </el-menu>

    </div>
    <!-- 右边盒子 -->
    <div class="rightBox">
      <div style="display: flex;">
        <span class="text">系统设置 / 人员管理 / 信息编辑</span>
        <img src="../assets/head.png" class="headimg"/>
        <div class="headText">
          <span style="color:#black">超级管理员 </span> 
          <el-tooltip>
            <div slot="content" @click="dialogFormVisible=true">修改密码</div>
            <span>{{nickName}}</span>
          </el-tooltip>
          <span>，您好！</span>
        </div>
        <div class="drop">
          <i class="el-icon-switch-button" style="margin-left: 11px;margin-top: 6px;"></i>
          <span class="headText" style="margin-top: 5px;" @click="logout" >退出</span>
        </div>
      </div>
    </div>
    <!-- 修改密码弹窗 -->
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" label-width="400px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
        <el-form-item label="原密码" prop="passWord">
          <el-input type="password" v-model="ruleForm.passWord"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="NewpassWord">
          <el-input type="passWord" v-model="ruleForm.NewpassWord"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="reNewpassWord">
          <el-input type="passWord" v-model="ruleForm.reNewpassWord"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePassWord">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  
  <!-- <router-link to="/login">Go to login</router-link> -->
</template>
<script>
  import md5 from 'js-md5'

  export default {
  name: 'App',
  components: {
   
  },
  data(){
    return {
      nickName: '',
      dialogFormVisible: false,
      ruleForm:{
         passWord: '',
         NewpassWord: '',
         reNewpassWord: ''
       },
       rules:{
        passWord:[
           { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        NewpassWord:[
           { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        reNewpassWord:[
           { required: true, message: '请确认新密码', trigger: 'blur' },
           { validator: ( rule, value, callback) => {
             if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.ruleForm.NewpassWord) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
           }, trigger: 'blur' }
        ],
       
      }
    }
  },
  methods:{
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
      },
    logout(){
    this.$confirm("是否退出登录?","提示", {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: "warning",
    }).then(() => {
      this.$http({
        url: "/admin/login",
      }).then((res) => {
        if (res.errorMsg){
          this.$message.error(res.errorMsg);
        }else{
          localStorage.removeItem('token')
          localStorage.removeItem('user')
          location.href = "#/login";
        }
      })
    })
  },
  changePassWord (){
    this.$refs.ruleForm.validate((valid) => {
      if(valid){
        this.$http({
          url:'/admin/changePassWord',
          method:'POST',
          data:{
            passWord:md5(this.ruleForm.passWord),
            NewpassWord:md5(this.ruleForm.NewpassWord)
          }
        }).then(res =>{
          if(!res.errorMsg){
            this.$message({
              message: '修改密码成功',
              type:'success',
              duration:3000
            });
            //修改成功在延时之后返回登录页
            setTimeout(() => {
               location.href = "#/login";
            },3000)
          }
        })
      }else {
        return false;
      }

    })

  },
    
  },
  created(){
    //从缓存中获取登录用户信息
    let user = localStorage.getItem("user");
    if(!user){
      console.log(history,location)
      location.href = location.origin + '#/login'
    }else{
      //解析为对象
      user = JSON.parse(user);
      //设置头像
      this.photo = user.avatarUrl || require("../assets/head.png")
      //设置昵称
      this.nickName = user.nickName || "bamboo";
      //获取菜单
      //this.getMenus()
    }

  },
  mounted(){

  }
  }
</script>

<style scoped>
.allBox{
  width: 100%;
  height: 100%;
  display: flex;
}
.leftBox{
  width: 20%;
  height: 100%;
  background-image: url(../assets/lfbg.png) ;
  background-size: 100%,100%;
}
.juzao{
  width: 100px;
  height: 23px;
  font-size: 18px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #FFFFFF;
  margin-left: 47px;
  margin-top: 6px;
}
.line{
  width: 12px;
  height: 1px;
  background: #FFFFFF;
  border-radius: 1px 1px 1px 1px;
  opacity: 1;
  margin-left: 34px;
  margin-top: 16px;
}
.set2img{
  width: 15px;
  height: 15px;
  margin-left: 34px;
  margin-top: 25px;
}
.syText{
  width: 28px;
  height: 18px;
  font-size: 14px;
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #AAAAAA;
  margin-top: 24px;
  margin-left: 8px;
}
.setimg{
  width: 18px;
  height: 18px;
  margin-left: 33px;
  margin-top: 22px;
}
.xtszText{
  width: 56px;
  height: 18px;
  font-size: 14px;
  font-family: MicrosoftYaHeiUI-, MicrosoftYaHeiUI;
  font-weight: normal;
  color: #AAAAAA;
  margin-top: 22px;
  margin-left: 3px;
}
.arrowsimg{
  width: 9px;
  height: 5px;
  margin-left: 67px;
  margin-top: 29px;
}
.rightBox{
  width: 80%;
  height: 100%;
  background: #EFF6FC;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}
.text{
  width: 226px;
  height: 20px;
  font-size: 16px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #2C2C2C;
  margin-top: 37px;
  margin-left: 37px;
}
.headimg{
  width: 48px;
  height: 48px;
  background-size: 100% 100%;
  margin-top: 30px;
  margin-left: 388px;
}
.headText{
  width: 160px;
  height: 19px;
  font-size: 14px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
  color: #2C2C2C;
  margin-top: 44px;
  margin-left: 8px;
}
.drop{
  width: 71px;
  height: 29px;
  background: #F56C6C;
  border-radius: 15px 15px 15px 15px;
  opacity: 1;
  margin-top: 40px;
  margin-left: 4px;
  display: flex;
}

</style>
